<template>
	<uni-popup ref="commentPopup" type="bottom" @change="onPopupChange">
		<view class="comment-popup">
			<view class="popup-header">
				<text class="popup-title">{{ title }}</text>
				<text class="popup-close" @click="close">取消</text>
			</view>
			<view class="popup-content">
				<textarea class="comment-textarea" v-model="inputText" :placeholder="placeholder" :focus="showKeyboard"
					:adjust-position="false" maxlength="500"></textarea>
				<view class="popup-footer">
					<text class="char-count">{{ inputText.length }}/500</text>
					<button class="send-btn" :disabled="!inputText.trim() || sending" @click="handleSend">
						{{ sending ? '发送中...' : '发布' }}
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, defineExpose } from 'vue'

	// Props 定义
	const props = defineProps<{
		title ?: string
		placeholder ?: string
		defaultValue ?: string
	}>()

	// Events 定义
	const emit = defineEmits<{
		open : []
		close : []
		send : [text: string]
		change : [e: any]
	}>()

	// 响应式数据
	const commentPopup = ref(null)
	const inputText = ref(props.defaultValue || '')
	const showKeyboard = ref(false)
	const sending = ref(false)

	// 弹窗状态变化
	const onPopupChange = (e) => {
		if (e.show) {
			showKeyboard.value = true
		} else {
			showKeyboard.value = false
		}
		emit('change', e)
	}

	// 打开弹窗
	const open = () => {
		commentPopup.value?.open()
		emit('open')
	}

	// 关闭弹窗
	const close = () => {
		showKeyboard.value = false
		commentPopup.value?.close()
		emit('close')
	}

	// 发送内容
	const handleSend = () => {
		if (!inputText.value.trim() || sending.value) return

		sending.value = true
		emit('send', inputText.value.trim())
	}

	// 清空输入
	const clear = () => {
		inputText.value = ''
	}

	// 设置发送状态
	const setSending = (status : boolean) => {
		sending.value = status
	}

	// 设置输入内容
	const setText = (text : string) => {
		inputText.value = text
	}

	// 暴露方法给父组件
	defineExpose({
		open,
		close,
		clear,
		setSending,
		setText
	})
</script>

<style lang="scss" scoped>
	// 评论弹窗
	.comment-popup {
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.popup-close {
				color: #666;
				font-size: 28rpx;
			}
		}

		.popup-content {
			.comment-textarea {
				width: 100%;
				min-height: 200rpx;
				background-color: #f8f8f8;
				border-radius: 16rpx;
				padding: 24rpx;
				font-size: 28rpx;
				margin-bottom: 24rpx;
				border: none;
				outline: none;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.char-count {
					font-size: 24rpx;
					color: #999;
				}

				.send-btn {
					background-color: #ff4757;
					color: #fff;
					border: none;
					border-radius: 32rpx;
					padding: 16rpx 32rpx;
					font-size: 26rpx;

					&:disabled {
						background-color: #f0f0f0;
						color: #ccc;
					}
				}
			}
		}
	}
</style>